<template>
  <el-container>
    <el-aside width="200px">
      <div><router-link to="/home">每日抽奖</router-link></div>
      <div><router-link to="/manage">抽奖设置</router-link></div>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
</script>

<style>
html,
body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app,
body,
html {
  width: 100%;
  height: 100%;
}
#app {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  padding: 20px 0;
  border-right: 1px solid #ddd;
}
.el-aside > div {
  height: 40px;
  line-height: 40px;
}
.el-aside > div:first-child {
  margin-bottom: 10px;
}
.el-aside > div > a {
  padding: 0 20px;
  height: 100%;
  width: 100%;
  display: inline-block;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
a {
  color: black;
}
.router-link-active,
.router-link-exact-active {
  color: #1e80ff;
  background: #e8f3ff;
}
</style>
